<template>
    <div>
		<el-row>
            <el-col :xs="{span: 24, offset: 0}" :sm="{span: 6, offset:8}" class="login">
                <h2 class="title">后台管理系统</h2>
                <el-form label-position="left" label-width="70px">
                    <el-form-item label="账号：">
                        <el-input v-model="userName" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：">
                        <el-input v-model="passWord" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-form>
                <el-button size="medium" @click="userLogin()">登录</el-button>
                <router-link to="fo" class="forgetPassword">忘记密码?</router-link>
            </el-col>
        </el-row>
    </div>
</template>

<script>
	import Menu from "@/service/menu-service.js"
	const _menu = new Menu();
	
	export default {
        name: 'Login',
        props:{
            
        },
        data :function() {
            return {
                userName:'',
                passWord:''
            }
        },
        components:{
        
        },
        created(){
        },
        methods:{
           userLogin(){
                _menu.userLogin({userName:this.userName,passWord:this.passWord}).then((res)=>{
                   if(res.data.length==0){
                       this.$alert('账号密码错误', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$message({
                                    type: 'info',
                                    message: `action: ${ action }`
                                });
                            }
                        });
                   }
                   else{
                       this.$router.push({path:'/manage'});
                   }
                },(err)=>{
                   console.log(err)
                })
           }
        }
	}
</script>

<style scoped lang="less">
	.login{
        padding: 20px;
        margin-top: 100px;
        border: 1px solid #f2f2f2;
        background: #fef0f0;
        color: #606266;
        .title{
            text-align: center;
            padding: 10px;
        }
        .forgetPassword{
            font-size: 12px;
            float: right;
            cursor: pointer;
            color: #606266;
            padding-top: 10px;
        }
    }
    
    
</style>